<template>
  <div>
    <el-dialog :title="title" :visible="visible" @close="handleClose" :close-on-click-modal="false">
      <el-form :model="formCommodity" label-position="right" ref="formCommodity" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品编号" prop="productCode" :label-width="formLabelWidth">
              <el-input v-model="formCommodity.productCode" placeholder="请输入商品编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品名称" prop="productName" :label-width="formLabelWidth">
              <el-input v-model="formCommodity.productName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="助记码" prop="mnemonicCode" :label-width="formLabelWidth">
              <el-input v-model="formCommodity.mnemonicCode" placeholder="请输入助记码" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位" prop="productUnit" :label-width="formLabelWidth">
              <el-select style="width: 100%;" v-model="formCommodity.productUnit" placeholder="请选择单位" filterable
                         clearable>
                <el-option v-for="item in unitList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品分类" prop="productCategory" :label-width="formLabelWidth">
              <TreeSelect
                :key="'tree-select-' + Date.now()"
                style="width: 100%"
                v-model="formCommodity.productCategory"
                :data="typeTreeData"
                :valueFields="{ parent: 'nccStuCode', child: 'stuClassId' }"
                :labelField="{ parent: 'nccStuName', child: 'stuClassName' }"
                :nodeKeyFields="{ parent: 'pkMarbasclass', child: 'stuClassId' }"
                placeholder="请选择分类"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产厂家" prop="manufacturer" :label-width="formLabelWidth">
              <el-input v-model="formCommodity.manufacturer" placeholder="请输入生产厂家"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品规格" prop="packSpec" :label-width="formLabelWidth">
              <el-input v-model="formCommodity.packSpec" placeholder="请输入商品规格"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="简称" prop="productShortName" :label-width="formLabelWidth">
              <el-input v-model="formCommodity.productShortName" placeholder="请输入简称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用量用法" prop="administrationDosage" :label-width="formLabelWidth">
              <el-input v-model="formCommodity.administrationDosage" placeholder="请输入用量用法"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="批准文号" prop="approvalNum" :label-width="formLabelWidth">
              <el-input v-model="formCommodity.approvalNum" placeholder="请输入批准文号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="不良反应" prop="untowardReaction" :label-width="formLabelWidth">
              <el-input v-model="formCommodity.untowardReaction" placeholder="请输入不良反应"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储存条件" prop="storageCondition" :label-width="formLabelWidth">
              <el-input v-model="formCommodity.storageCondition" placeholder="请输入储存条件"></el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="条码数量" prop="barNum" :label-width="formLabelWidth">-->
<!--              <el-input-number v-model="formCommodity.barNum" placeholder="请输入条码数量" :min="0" style="width: 100%"></el-input-number>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="仓库" prop="stoId" :label-width="formLabelWidth">-->
<!--              <el-select filterable v-model="formCommodity.stoId" placeholder="请选择仓库" style="width: 100%">-->
<!--                <el-option v-for="(item, index) in wareHouseData" :key="index" :value="item.stoId" :label="item.stoName">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  nccBasicSkuInfoSave,//新增
  nccBasicSkuInfoUpdate,//修改
  findAllNccBasicUnitData, //单位选择
  findTreeSkuTypeData,//分类选择
} from '@/api/basic/PersonnelInformation.js'
import {
  getAllWarehouseList,//仓库下拉
} from "@/api/index/yxl.js";
import TreeSelect from '@/components/treeSelect/index'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formCommodity: {},
      rules: {
        productCode: [{
          required: true,
          message: '请输入商品编号',
          trigger: 'blur'
        }],
        productName: [{
          required: true,
          message: '请输入商品名称',
          trigger: 'blur'
        }],
        productUnit: [{
          message: '请输入单位',
          required: true,
          trigger: 'change'
        }],
        productCategory: [{
          message: '请选择类型',
          required: true,
          trigger: 'change'
        }]
      },
      typeTreeData: [],//分类
      unitList: [],//单位
      wareHouseData:[],//仓库
      title: '新增商品',
      formLabelWidth: '110px',
    };
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.getNccMaterialList();
      }
    }
  },
  created() {
    this.getUnitList();//单位
    this.getNccMaterialList();
    this.getWarehouseList();//仓库
  },
  components: {
    TreeSelect
  },
  methods: {
    // 在获取数据后，预处理树形数据
    getNccMaterialList() {
      findTreeSkuTypeData().then(res => {
        this.typeTreeData = res.data;
      })
    },
    //获取单位
    getUnitList() {
      findAllNccBasicUnitData().then(res => {
        this.unitList = res.data
      })
    },
    //获取仓库
    getWarehouseList() {
      getAllWarehouseList().then(res => {
        this.wareHouseData = res.data;
      })
    },
    //获取当前行信息
    openDialog(type, val) {
      this.title = type === 'edit' ? '查看商品' : '新增商品';
      // 根据类型区分新增和编辑逻辑
      if (type === 'edit' && val) {
        this.formCommodity = {
          ...val,
        };
        this.formCommodity.productUnit = Number(this.formCommodity.productUnit);
      } else {
        this.formCommodity = {}
      }
    },
    // 提取重置表单的逻辑
    handleClose() {
      // 通过事件通知父组件更新visible值，触发update:visible事件
      this.$emit('update:visible', false);
      this.$nextTick(() => {
        this.$refs.formCommodity.resetFields();
      })
    },
    //提交表单
    submit() {
      this.$refs.formCommodity.validate((valid) => {
        if (valid) {
          const apiMethod = this.title === '新增商品' ? nccBasicSkuInfoSave : nccBasicSkuInfoUpdate;
          // 调用相应的 API 方法
          apiMethod(this.formCommodity).then(res => {
            this.$emit('addSuccess'); // 通知父组件添加成功
            this.$message({
              message: res.data.msg, // 显示成功消息
              type: 'success',
            });
            // 提交成功后可以选择清空表单
            this.handleClose();
          }).catch(err => {
            this.$message({
              message: err?.msg || '操作失败', // 捕获错误信息
              type: 'error',
            });
          });
        } else {
          // 校验失败
          return false;
        }
      });
    }
  },
};
</script>

<style scoped>
/deep/ .el-dialog__body {
  overflow-y: auto;
}
</style>
